<template>
	<view class="content" :style="{minHeight:winH}">
		<view class="list">
			<view class="li row">
				<view class="tit">服务类型：</view>
				<view class="txt fill">{{detailInfo.serviceTypeName}}</view>
			</view>
			<view class="li row">
				<view class="tit">服务状态：</view>
				<view class="txt fill">{{detailInfo.statusName}}</view>
			</view>
			<view class="li row">
				<view class="tit">创建时间：</view>
				<view class="txt fill">{{$filters.formatDate(detailInfo.createTime)}}</view>
			</view>
			<view class="li row">
				<view class="tit">房间名称：</view>
				<view class="txt fill">{{detailInfo.roomFullName}}</view>
			</view>
			<view class="li row">
				<view class="tit">服务说明：</view>
				<view class="txt fill">{{detailInfo.content}}</view>
			</view>
			<view class="li row">
				<view class="tit">服务开始时间：</view>
				<view class="txt fill">{{$filters.formatDate(detailInfo.serviceTimeStart)}}</view>
			</view>
			<view class="li row">
				<view class="tit">服务结束时间：</view>
				<view class="txt fill">{{$filters.formatDate(detailInfo.serviceTimeEnd)}}</view>
			</view>
			<view class="li row">
				<view class="tit">服务人员：</view>
				<view class="txt fill">{{detailInfo.followUpUserName}}</view>
			</view>
			<view class="li row">
				<view class="tit">联系电话：</view>
				<view class="txt fill">{{detailInfo.toDoorMobile}}</view>
			</view>
			<view class="li row">
				<view class="tit">附件图片：</view>
				<view class="txt fill">
					<image class="img" :src="item" v-for="(item,i) in detailInfo.imgs" @click="$Foundation.previewImgs(detailInfo.imgs,i)"></image>
				</view>
			</view>
			<view class="li row" v-if="detailInfo.status==2">
				<view class="tit">服务评价：</view>
				<view class="txt fill" v-if="detailInfo.evaluatedOrNot">
					<uni-rate v-model="detailInfo.rating" :disabled="detailInfo.status == 2" disabledColor="rgba(253, 150, 24, 1)" :size="24"></uni-rate>
				</view>
				<view class="txt fill yellow" v-else @click="goTo('serviceAppraise?id='+id)">去评价</view>
			</view>
			<view class="li row" v-if="detailInfo.status==2">
				<view class="tit"></view>
				<view class="txt fill" v-if="detailInfo.evaluatedOrNot">{{detailInfo.comments}}</view>
			</view>
			<view class="status" :class="detailInfo.status==1?'in':detailInfo.status==2?'ok':''">{{detailInfo.statusName}}</view>
		</view>
		<view v-if="detailInfo.status!=2" class="btn-primary" @click="cancleServe">取消服务</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad,onShow } from "@dcloudio/uni-app"
import { swoTicketDetail,swoTicketCancel } from '@/common/API/bpm'
import { getDictData } from '@/common/API/system'
const winH = ref()
const id = ref()
const detailInfo = ref<any>({})
onLoad((options)=>{
	winH.value = uni.getWindowInfo().windowHeight+"px"
	id.value = options.id
	// getTypeList()
	// getDetail()
})
onShow(()=>{
	console.log(id.value)
	getTypeList()
	getDetail()
})
const typeList = ref<any>([])
const getTypeList = async ()=>{
	let res = await getDictData({
		pageNo: 1,
		pageSize: 10,
		dictType: 'workorder_type'
	})
	typeList.value.push(res.list)
}

const getDetail = async ()=>{
	let res = await swoTicketDetail({
		id:id.value
	})
	detailInfo.value = res.swoTicketRespVO
	detailInfo.value.serviceTypeName = typeList.value[0].find((v)=>v.value==detailInfo.value.serviceType)?.label
	detailInfo.value.imgs = detailInfo.value.attachments.split(',')
}

const goTo = (url)=>{
	uni.navigateTo({
		url: url
	})
}

const cancleServe = ()=>{
	uni.showModal({
		title: '提示',
		content: '确认取消此服务？',
		success: async (result)=> {
			if (result.confirm) {
				let res = await swoTicketCancel({
					id: id.value
				})
				uni.showToast({
					title:'取消成功'
				})
				setTimeout(()=>{
					uni.navigateBack()
				},2000)
			} else if (result.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}
</script>

<style lang="scss" scoped>
.content{
	padding: 16rpx 32rpx;
	display: flex;
	flex-direction: column;
	background: #fff;
	.list{
		background: #fff;
		border-radius: 16rpx;
		margin: 0 0 16rpx;
		padding: 32rpx;
		position: relative;
		overflow: hidden;
		flex: 1;
		box-shadow: 0 4rpx 32rpx rgba(0, 0, 0, 0.05);
		.li{
			align-items: flex-start;
			.tit{
				width: 200rpx;
				margin-right: 10rpx;
				color: #999;
			}
			.txt{
				color: #000;
				word-break: break-word;
			}
			.img{
				display: inline-block;
				width: 140rpx;
				height: 140rpx;
				margin: 0 10rpx 10rpx 0;
			}
		}
		.status{
			width: 90px;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			position: relative;
			background: #666;
			color: #fff;
			font-size: 24rpx;
			position: absolute;
			top: 10px;
			right: -26px;
			transform: rotate(45deg);
			&.not{
				background: #F8534B;
			}
			&.in{
				background: $uni-color-primary;
				color: #fff;
			}
			&.ok{
				background: #39BF6F;
				color: #fff;
			}
		}
	}
	.btn-primary{
		width: 100%;
	}
}
</style>
